<template>
  <div class="">
    <app-detail :appInfo="appInfo" :listLoading="listLoading"></app-detail>
    <div class="button-group">
      <el-button type="danger" @click="back">返回列表</el-button>
    </div>
  </div>
</template>

<script>
  import AppDetail from '../AppDetail'
  import {fetchAppInfo} from '@/api/apps'

  export default {
    components: {
      'app-detail': AppDetail
    },
    data(){
      return {
        // 通过给appInfo赋一个默认值,避免子组件渲染过快报错问题
        appInfo: {
          icon: "",
          packageInfo: {
            "packageName": "",
            "appName": "",
            "version": "",
            "lang": "",
            "osSupport": "",
            "permissionList": [
            ],
            "size": ''
          },
          "type": '',
          "category": '',
          "releaseTime": "",
          "developer": "",
          "keyword": [
          ],
          "website": "",
          "description": "",
          "overview": "",
          "changeLog": "",
          "screenShots": [
          ]
        },
        listLoading: true
      }
    },
    methods:{
      back(){
        this.$router.push({name: 'entry-list'})
      }
    },
    created(){
      fetchAppInfo(this.$route.query.id).then(res => {
        this.appInfo = res.data
        this.listLoading = false
      })
    }
  }
</script>

<style lang="scss" scoped>
  .button-group{
    display: flex;
    justify-content: center;
    margin-top: 40px;
  }
</style>
